<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米账号-登录</title>
    <!-- 1. bootstrap.css/bootstrap.min.css -->
    <link rel="stylesheet" href="/dev/css/reset.css">
    <link rel="stylesheet" href="/dev/plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/dev/css/login.css">
    <link rel="stylesheet" href="/dev/css/register.css">


</head>

<body>
    <div id="root">
        <div class="layout">
            <div class="layout-left" style="background-image: url('/dev/imgs/zlj-login-banner.jpg');"></div>
            <div class="layout-right">
                <div class="right-scroll">
                    <div class="right-header">
                        <div class="header-title">
                            <div class="title-logo">
                                <div class="logo"></div>
                                <span>小米账号</span>
                            </div>
                        </div>
                        <div class="right-nav">
                            <a class="nva-item" href="">用户协议</a>
                            <div class="nav-divider"></div>
                            <a class="nva-item" href="">隐私政策</a>
                            <div class="nav-divider"></div>
                            <a class="nva-item" href="">帮助中心</a>
                        </div>
                    </div>
                    <div class="right-container">
                        <div class="login-card">
                            <div class="ant-tabs">
                                <div class="ant-tabs-nav">
                                    <div class="login-a-1">
                                        <a href="">登录</a>
                                    </div>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <div class="login-register-1">
                                        <a href="./register.html">注册</a>
                                    </div>
                                </div>
                                <div class="ant-tabs-content">
                                    <form class="mi-form" action="" role="form">
                                        <div class="mi-form-content">
                                            <div class="login-email">
                                                <input type="text" name="email"  class="form-control email-account" placeholder="请输入邮箱：" id="email">
                                                <span class="text-danger" id="email_span" style="display: none">sorry,email is not found!</span>
                                            </div>
                                            <div class="konghang"></div>
                                            <div class="register-password">
                                                <input type="password" name="code" id="code" class="form-control email-password" placeholder="请输入验证码：">
                                                <button type="button" onclick="send_code()">获取验证码</button>
                                            </div>
                                            <div class="konghang"></div>
                                            <button class="login-btn" onclick="login()" type="submit" id="login-btn" disabled>登录</button>
                                            <div class="form-actions">
                                                <!-- <div class="forn-actions-url forn-left-actions-url">
                                                    <a class="clj-a clj-a-mm" href="">忘记密码</a>
                                                </div> -->
                                                <div class="forn-actions-url forn-right-actions-url">
                                                    <a class="clj-a clj-a-yzm" href="./login.html">密码登录</a>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- jquery.min.js文件 - jquery本身是js的框架. bootstrap依赖于jquery框架 -->
    <script src="/dev/plugins/jquery/jquery.min.js"></script>
    <!-- bootstrap.js/bootstrap.min.js -->
    <script src="/dev/plugins/bootstrap/js/bootstrap.js"></script>
    <script>
        //登录的按钮的单击事件
        function login(){
            let email = $("#email").val();
            let code = $("#code").val();
            //第二个参数是json对象的格式
            $.post('/dev/user',{email:email,code:code},function(res){
                if(res.code=="200"){
                    //登录成功的
                    window.location="/dev/views/index.html";
                }else if(res.code=="404"){
                    alert(res.msg)
                }else{
                    alert(res.msg)
                }
            })
        }


        //发送验证码的事件
        function send_code(){
            //1. 获取email文本框输入的邮箱
            //js写法
            //let email = document.getElementById("email").value;

            //jquery写法 - jquery是js的框架
            let email = $("#email").val();
            //alert(email)
            //通过ajax方式 - 将email发送到后端
            //发送get请求
            //1. 第一个参数是url地址.  参数是?key1=value1&key2=value
            //2. 第二个参数是一个函数,函数res,代表的是后端返回过来的结果
            //获取邮箱的错误提示的span对象
            let email_span = document.getElementById("email_span");

            $.get(`/dev/user?email=${email}`,function(res){//jquery会自动将这个json字符串->json对象
                //json对象 - 通过json对象.key获取json对象的valu
                //if(res.code)
                if(res.code=="404"){
                    //邮箱不存在
                    //通过js操作样式,让它再次显示出来
                    email_span.style.display="";
                }else{
                    email_span.style.display="none";
                    //验证码是发送成功
                    alert("验证码已经发送到您的邮箱!"+res.data)
                }
            })
        }




        $(document).ready(function() {
            $('#email, #code').on('input', function() {
                var email = $('#email').val();
                var password = $('#code').val();
                if (email && password) {
                    $('#login-btn').prop('disabled', false);
                } else {
                    $('#login-btn').prop('disabled', true);
                }
            });
        });
    </script>
</body>
</html>